﻿<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>横屏广告</title>
<meta name="viewport" content="initial-scale=1">
<!--<link rel="stylesheet" href="../../dist/css/swiper.min.css">
<script src="../../dist/js/swiper.min.js"></script>-->
<link rel="stylesheet" href="css/swiper.min.css">
<script src="js/swiper.min.js"></script>
<style>
* {
	margin: 0;
	padding: 0;
}
html,body,.swiper-container,.swiper-slide{
	height:100%;}
  .swiper-slide {
	  overflow:hidden;
  }
.swiper-slide img{
	width:100%;
	height: 100%;
}
</style>
</head>
<body>
<div style="max-width:640px; margin:0 auto; height:100%;">
<div class="swiper-container">
  <div class="swiper-wrapper">
  <div class="swiper-slide"><img src="img/a1.jpg"  ></div>
    <div class="swiper-slide"><img src="img/a2.jpg"  ></div>
    <div class="swiper-slide"><img src="img/a3.jpg"  ></div>
    <div class="swiper-slide"><img src="img/a4.jpg"  ></div>

  </div>
  <div class="swiper-pagination"></div>  
</div>
</div>
<script type = "text/javascript">
var mySwiper = new Swiper('.swiper-container', {
//  direction: 'vertical',
	mousewheelControl: true,
	watchSlidesProgress: true,
	 pagination: '.swiper-pagination',
	onInit: function(swiper) {
		swiper.myIndex = 0;//activeIndex在滑动到一半时会切换，改用滑动完再切换的myIndex
	},
//	onProgress: function(swiper) {
//		for (var i = 0; i < swiper.slides.length; i++) {
//			
//			var slide=swiper.slides.eq(i);
//			var progress = swiper.slides[i].progress;
//			var translate, boxShadow;
//			translate = progress * swiper.height * 0.8;
//			scale = 1 - Math.min(Math.abs(progress * 0.2), 1);
//			if (i == swiper.myIndex) {
//				slide.transform('translate3d(0,' + (translate) + 'px,0) scale(' + scale + ')');
//				slide.css({'z-index':0,'boxShadow':'0px 0px 10px rgba(0,0,0,.5)'});
//			}
//		}
//	},
//	onTransitionEnd: function(swiper) {
//		swiper.myIndex = swiper.activeIndex;
//		for (var i = 0; i < swiper.slides.length; i++) {
//		var slide=swiper.slides.eq(i);
//		slide.transform('');
//		slide.css('z-index',1);
//		}
//		swiper.enableMousewheelControl();
//		//swiper.enableTouchControl();
//	},
//	onSetTransition: function(swiper, speed) {
//		for (var i = 0; i < swiper.slides.length; i++) {
//			var slide=swiper.slides.eq(i);
//			slide.transition(speed + 'ms');
//		}
//		swiper.disableMousewheelControl();
//		//swiper.disableTouchControl();
//	}
});
</script>

</body>
</html>